<template>
  <div class="dashboard-container">
    <el-row :gutter="30">
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>用户总量:{{baseData.userCount.count}}</span>
          </div>
          <div>今日用户访问量:{{baseData.userCountToday.count}}</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>图片总量:{{baseData.imgCount.count}}</span>
          </div>
          <div>今日新增图片量:{{baseData.imgCountToday.count}}</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>新闻总量:{{baseData.newsCount.count}}</span>
          </div>
          <div>今日新增新闻量:{{baseData.newsCountToday.count}}</div>
        </el-card>
      </el-col>
    </el-row>

    
    <el-card class="echartscount">
      <div slot="header">
        <span>图片统计</span>
      </div>
      <div id="echart1"></div>
    </el-card>
    <el-card class="echartscount">
      <div slot="header">
        <span>用户统计</span>
      </div>
      <div id="echart2"></div>
    </el-card>
  </div>
</template>

<script>
import baseDataApi from "@/api/dashboard"; //引整个bashboard.js里定义的api,不需要用{}来包裹
var echarts = require("echarts");
export default {
  name: "Dashboard",
  data() {
    return {
      baseData: {
        //获得的结果是在一个大对象下嵌套获得的,所以为了找到最底层的数据,前面的都要定义出来
        userCount: {},
        userCountToday: {},
        imgCount: {},
        imgCountToday: {},
        newsCount: {},
        newsCountToday: {},
        imgCountByDay: [],
        userCountByDay:[]
      },
    };
  },
  created() {
    this.getBaseData();
  },

  // mounted 是dom渲染完毕后触发
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    this.myChart = echarts.init(document.getElementById("echart1"));
    this.myChart2 = echarts.init(document.getElementById("echart2"));
  },
  methods: {
    getBaseData() {
      baseDataApi.baseData().then((res) => {
        this.baseData = res;
        this.initImgEcharts();
        this.inituserEcharts();
      });
    },
    
    // 初始化图片的报表
    initImgEcharts() {
      var xData = [];
      var yData = [];
      for (var i = 0; i < this.baseData.imgCountByDay.length; i++) {
        var itemImg = this.baseData.imgCountByDay[i];
        xData.push(itemImg.date);
        yData.push(itemImg.count);
      }
      this.myChart.setOption({
        color: "yellow",
        title: {
          text: "每日图片上传量",
        },
        tooltip: {},
        xAxis: {
          data: xData,
          axisLabel: {
            rotate: 32,
          },
        },
        yAxis: {},
        series: [
          {
            name: "数量",
            type: "bar", //bar为柱状图,line为折线图,pie为饼状图
            data: yData,
          },
        ],
      });
    },

    inituserEcharts() {
      var xData2 = [];
      var yData2 = [];
      for (var i = 0; i < this.baseData.userCountByDay.length; i++) {
        var itemuser = this.baseData.userCountByDay[i];
        xData2.push(itemuser.date);
        yData2.push(itemuser.count);
      }
      this.myChart2.setOption({
        color: "red",
        title: {
          text: "每日用户访问量",
        },
        tooltip: {},
        xAxis: {
          data: xData2,
          axisLabel: {
            rotate: 32,
          },
        },
        yAxis: {},
        series: [
          {
            name: "数量",
            type: "bar",
            data: yData2,
          },
        ],
      });
    },
  },

  
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  margin: 30px;
}
#echart1,
#echart2 {
  width: 500px;
  height: 300px;
  background-color: blue;
}
.echartscount {
  margin-top: 20px;
}
</style>
